{% extends 'base.html' %}
{% load static %}

{% block css %}
{% endblock %}

{% block content %}
    <div class="py-4 " style="background-color: #1c1c39;">
        <div class="container" style="margin-top: 50px; justify-content: center; display: -webkit-flex;">
            <div class="row">
                <!-- 文章内容显示  -->
                <article style="width: 800px;">
                    <div class="box shadow-sm border rounded bg-white mb-3 w-100 min-vh-100">
                        <div style="float: right; margin-right: 3px">
                            {% if post_object.author == request.universe.user %}
                                <span class="ml-auto ">
                                <a class="btn btn-sm small"
                                   href="{% url 'blog_edit' blogpage_id=post_object.id %}">
                                    <i class="feather-edit" style="font-size: 1rem"> 编辑</i></a>
                            </span>
                            {% endif %}
                        </div>

                        <div class="tab-content" id="myTabContent">
                            <div class="tab-pane fade show active" id="home" role="tabpanel"
                                 aria-labelledby="home-tab">
                                <div class="p-3 d-flex align-items-center w-100 min-vh-15" href="#">

                                    <div class="w-100 border-bottom">
                                        <!--
                                        <textarea placeholder="写下你的心情 ......"
                                                  class="form-control border-0 p-0 shadow-none min-vh-15"
                                                  rows="1"></textarea>
                                        -->

                                        <h2 align="center">{{ post_object.title }}</h2>
                                        <p align="center">{{ post_object.create_datetime }} |
                                            author：{{ post_object.author }}</p>
                                        <p>tags:
                                            {% for tag in post_object.tags.all %}
                                                <a href="#" class="badge badge-secondary">{{ tag }}</a>
                                                {% if not forloop.last %}
                                                    ,
                                                {% endif %}
                                            {% endfor %}
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="tab-content" id="myTabContent">
                            <div class="tab-pane fade show active" id="home" role="tabpanel"
                                 aria-labelledby="home-tab">
                                <div class="p-3 d-flex align-items-center w-100 min-vh-15" href="#">

                                    <div class="w-100" style="width: 100px" id="content">
                                        {{ post_object.content|safe }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </article>
            </div>
        </div>
    </div>

{% endblock %}


{% block js %}
    <!-- Include the Quill library -->

    <script type="text/javascript">

        // 页面框架加载完成之后自动执行函数
        $(function () {
            // bindClickSubmit();
        });

        // 图片溢出div处理
        window.onload = function () {
            var imgs = document.getElementsByTagName("img");
            var contentLeft = document.getElementById("content");
            for (var i = 0; i < imgs.length; i++) {
                // imgs[i].style["max-width"] = contentLeft.offsetWidth - 40 + "px";
                imgs[i].style["max-width"] = 100 + "%";
                imgs[i].style["height"] = "auto";
            }
        }


    </script>
{% endblock %}